<template>
	<!-- 删除弹出框 -->
	<a-modal
		v-model:visible="visible"
		:title="showTitle"
		width="464px"
		title-align="start"
		class="ConfirmDeletionModal"
		@close="remove"
	>
		<a-space direction="vertical" :size="8" fill>
			<div class="ConfirmDeletionTips" v-html="showTipsText"></div>
			<a-input v-model="inputValue" :placeholder="showTitle" />
		</a-space>
		<template #footer>
			<a-button @click="onCancelClick">取消</a-button>
			<a-button type="primary" status="danger" :loading="loading" :disabled="disabledOkBtn" @click="onOkClick">{{
				showOkText
			}}</a-button>
		</template>
	</a-modal>
</template>
<script>
export default {
	name: 'ConfirmDialog',
	props: {
		title: {
			type: String,
			default: '',
		},
		keyword: {
			type: String,
			default: '',
		},
		tipsText: {
			type: String,
			default: '',
		},
		text: {
			type: String,
			default: '',
		},
		okText: {
			type: String,
			default: '',
		},
		resolve: {
			type: Function,
			required: true,
		},
		reject: {
			type: Function,
			required: true,
		},
		remove: {
			type: Function,
			required: true,
		},
	},
	data() {
		return {
			visible: true,
			inputValue: '',
			loading: false,
		};
	},
	computed: {
		showTitle() {
			return this.title || `确认${this.keyword}`;
		},
		showTipsText() {
			if (this.tipsText) {
				return this.tipsText.replace('{{text}}', `<span>${this.showText}</span>`);
			}
			return `${this.keyword}后不可恢复，请谨慎操作！输入 “<span>确认${this.keyword}</span>” 后操作`;
		},
		showText() {
			return this.text || `确认${this.keyword}`;
		},
		showOkText() {
			return this.okText || this.keyword;
		},
		disabledOkBtn() {
			return this.inputValue != this.showText;
		},
	},
	methods: {
		close(isClose = true) {
			if (isClose) {
				this.visible = false;
			} else {
				this.loading = false;
			}
		},
		onCancelClick() {
			this.close();
			this.reject();
		},
		onOkClick() {
			this.loading = true;
			this.resolve(this.close);
		},
		beforeClose(done) {
			this.reject();
			done();
		},
	},
};
</script>
<style lang="less">
.ConfirmDeletionModal {
	.arco-modal-body {
		padding: 24px;
	}
	.ConfirmDeletionTips {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		color: rgba(78, 89, 105, 1);
		span {
			color: rgba(245, 63, 63, 1);
		}
	}
}
</style>
